<!doctype html>
<html lang="en"  xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8" />
	<title>穿见密码重置</title>
	<link rel="shortcut icon" href="/img/favicon.ico">
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="/layui/css/modules/layim/layim.css"/>
	<link rel="stylesheet" href="/layui/css/layui.css" />
	<link rel="stylesheet" href="/css/resetpw/base.css" />
	<link rel="stylesheet" href="/css/resetpw/layout.css"/>
	<script src="/js/jquery.js"></script>
	<script src="/js/bootstrap.min.js"></script>
	<script src="/layui/layui.js"></script>

</head>
<body>
	<div id="wrapper">
		<header th:include="include ::frontheader">
		</header>
		<div class="container w960 mt20">
			<div id="processor" >
				<ol class="processorBox oh">
					<li class="current">
						<div class="step_inner fl">
							<span class="icon_step">1</span>
							<h4>填写基本信息</h4>
						</div>
					</li>
					<li>
						<div class="step_inner fr">
							<span class="icon_step">2</span>
							<h4>邮箱激活</h4>
						</div>
					</li>
				</ol>
				<div class="step_line"></div>
			</div>
			<div class="content">
				<div id="step1" class="step hide">
					<form action=""  method="post" id="step1_frm">
						<div class="frm_control_group">
							<label class="frm_label">邮箱</label>
							<div class="frm_controls">
								<input type="text" name="email" class="frm_input email" maxlength="32"/>
							</div>
						</div>
						<div class="frm_control_group">
							<label class="frm_label">密码</label>
							<div class="frm_controls">
								<input type="password" name="password" class="frm_input passwd"/>
								<p class="frm_tips">字母、数字或者英文符号，最短6位，区分大小写</p>
							</div>
						</div>
						<div class="frm_control_group">
							<label class="frm_label">再次输入密码</label>
							<div class="frm_controls">
								<input type="password" name="" class="frm_input passwd2"/>
							</div>
						</div>
						<div class="frm_control_group">
							<label class="frm_label">验证码</label>
							<div class="frm_controls verifycode">
								<input type="text" name="resetpw" class="frm_input verifyCode" maxlength="4"/>
								<img id="vcode" src="/generate/valicode?bizCode=resetpw" alt="" />
								<a class="changeVerifyCode" href="javascript:;">换一张</a>
							</div>
						</div>
						<div class="toolBar">
							<a id="nextBtn" class="btn btn_primary" href="javascript:;">下一步</a>
						</div>
					</form>
				</div><!-- // step1 end -->
				<div id="step2" class="step hide">
					<div class="w330">
						<strong class="f16">感谢注册，确认邮件已发送至你的注册邮箱 : <br /><span id="email_text">haibao1024@gmail.com</span></strong>
						<p class="c7b">请进入邮箱查看邮件。</p>
						<p><a class="btn btn_primary mt20" id="loginEmail" href="#">登录邮箱</a></p>
						<p class="c7b mt20">没有收到邮件？</p>
						<p>1. 请检查邮箱地址是否正确，你可以返回 <a href="#" class="c46">重新填写</a></p>
						<p>2. 检查你的邮件垃圾箱</p>
						<p>3. 若仍未收到确认，请尝试 <a href="#" class="c46">重新发送</a></p>
					</div>
				</div><!-- // step2 end -->
			</div>
		</div><!-- // container end -->
		<footer id="footer" class="w960 oh">

		</footer><!-- // footer end -->
	</div><!-- // wrapper end -->
	
	<script>
		//显示提示框，目前三个参数(txt：要显示的文本；time：自动关闭的时间（不设置的话默认1500毫秒）；status：默认0为错误提示，1为正确提示；)
		function showTips(txt,time,status)
		{
			var htmlCon = '';
			if(txt != ''){
				if(status != 0 && status != undefined){
					htmlCon = '<div class="tipsBox" style="width:220px;padding:10px;background-color:#4AAF33;border-radius:4px;-webkit-border-radius: 4px;-moz-border-radius: 4px;color:#fff;box-shadow:0 0 3px #ddd inset;-webkit-box-shadow: 0 0 3px #ddd inset;text-align:center;position:fixed;top:25%;left:50%;z-index:999999;margin-left:-120px;"><img src="/images/ok.png" style="vertical-align: middle;margin-right:5px;" alt="OK，"/>'+txt+'</div>';
				}else{
					htmlCon = '<div class="tipsBox" style="width:220px;padding:10px;background-color:#D84C31;border-radius:4px;-webkit-border-radius: 4px;-moz-border-radius: 4px;color:#fff;box-shadow:0 0 3px #ddd inset;-webkit-box-shadow: 0 0 3px #ddd inset;text-align:center;position:fixed;top:25%;left:50%;z-index:999999;margin-left:-120px;"><img src="/images/err.png" style="vertical-align: middle;margin-right:5px;" alt="Error，"/>'+txt+'</div>';
				}
				$('body').prepend(htmlCon);
				if(time == '' || time == undefined){
					time = 1500; 
				}
				setTimeout(function(){ $('.tipsBox').remove(); },time);
			}
		}
		
		$(function(){
            $("#vcode,.changeVerifyCode").click(function (e) {
                $("#vcode").attr("src","/generate/valicode?bizCode=resetpw&"+new Date().getTime())
            })
			//AJAX提交以及验证表单
			$('#nextBtn').click(function(){
				var email = $('.email').val();
				var passwd = $('.passwd').val();
				var passwd2 = $('.passwd2').val();
				var verifyCode = $('.verifyCode').val();
				var EmailReg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/; //邮件正则
				if(email == ''){
					showTips('请填写您的邮箱~');
				}else if(!EmailReg.test(email)){
					showTips('您的邮箱格式错咯~');
				}else if(passwd == ''){
					showTips('请填写您的密码~');
				}else if(passwd2 == ''){
					showTips('请再次输入您的密码~');
				}else if(passwd != passwd2 || passwd2 != passwd){
					showTips('两次密码输入不一致呢~');
				}else if(verifyCode == ''){
					showTips('请输入验证码~');
				}else{
                    $.ajax({
						url: "/front/resetpw",
                        type: "post",
                        dataType: 'json',
                        data: $("#step1_frm").serialize(),
						success: function (data) {
							if (data.code==0){
							    $("#step1_frm")[0].reset();
                                $("#vcode").attr("src","/generate/valicode?bizCode=resetpw&"+new Date().getTime())
                                showTips('提交成功~ 即将进入下一步',2500,1);
                                //此处省略 ajax 提交表单 代码...
								$("#email_text").text(data.data[0]+"@"+data.data[1]);
								$("#loginEmail").attr("href","http://mail."+data.data[1])
                                $('.processorBox li').removeClass('current').eq(1).addClass('current');
                                $('.step').fadeOut(300).eq(1).fadeIn(500);
							}else {
                                showTips(data.msg);
							}
                        }
                    });

				}
			});
			
			//切换步骤（目前只用来演示）
			$('.processorBox li').click(function(){
				var i = $(this).index();
				$('.processorBox li').removeClass('current').eq(i).addClass('current');
				$('.step').fadeOut(300).eq(i).fadeIn(500);
			});
		});

        
	</script>
</body>
</html>